<template>
  <div>
    <div class="top">标题</div>
    <template
      ><el-input
        v-model="data.blog_title"
        placeholder="请输入内容"
        class="top"
      ></el-input
    ></template>
    <div class="top">标签</div>
    <div class="top">
      <el-select v-model="selectb" placeholder="请选择标签">
        <el-option
          v-for="item in optionsb"
          :key="item.bianqian_id"
          :label="item.bianqian_name"
          :value="item.bianqian_name"
        >
        </el-option>
      </el-select>
    </div>
    <div class="top">分类</div>
    <div class="top">
      <el-select v-model="selectf" placeholder="请选择分类">
        <el-option
          v-for="item in optionsf"
          :key="item.sotr_id"
          :label="item.sotr_id"
          :value="item.sort_name"
        >
        </el-option>
      </el-select>
    </div>
    <div class="top">日期</div>
    <div class="top">
      <el-date-picker
        v-model="data.blog_date"
        align="right"
        type="date"
        placeholder="选择日期"
      >
      </el-date-picker>
    </div>
    <div class="top"><vue-editor v-model="data.blog_content"></vue-editor></div>
    <div class="lef">
      <el-button type="primary" @click="tijiao()">提交</el-button>
    </div>
  </div>
</template>

<script>
import { biaoall } from "../../api/biaoapi";
import { sortall } from "../../api/sortapi";
import { adds, updates } from "../../api/blogsortapi";
import { add, blogall, update } from "../../api/blogapi";
import { VueEditor } from "vue2-editor";
export default {
  data() {
    return {
      optionsf: [],
      optionsb: [],
      selectf: "",
      selectb: "",
      userinfo: {},
      blog_id: "0",
      data: {
        blog_id: "",
        user_id: "",
        blog_title: "",
        blog_content: "",
        blog_views: "0",
        blog_comment_count: "0",
        blog_date: "",
      },
      wang: {
        blog_id: "",
        user_id: "",
        blog_title: "",
        blog_content: "",
        blog_views: "0",
        blog_comment_count: "0",
        blog_date: "",
      },
      cong: {
        blog_id: "",
        sort_id: "",
      },
    };
  },
  // 注册组件
  components: {
    VueEditor,
  },

  created() {
    this.getdate();

    var id = this.$route.query.shuju;
    if (id != null) {
      this.data.blog_title = id.blog_title;
      this.data.blog_id = id.blog_id;
      this.data.blog_content = this.htmlDecodeByRegExp(id.blog_content);
      this.data.blog_date = id.blog_date;
      this.selectf = id.blog_sort;
      this.data.user_id = id.user_id;
      this.data.blog_comment_count = id.blog_comment_count;
      this.data.blog_views = id.blog_views;
      this.blog_id = 1;
    } else {
      this.blogid();
      this.userinfo = JSON.parse(localStorage.getItem("userInfo"));
      this.data.user_id = this.userinfo.user_id;
    }
  },
  methods: {
    zeng(length) {
      return length + 1;
    },
    getdate() {
      sortall().then((res) => {
        this.optionsf = res;
      });
      biaoall().then((res2) => {
        this.optionsb = res2;
      });
    },

    htmlEncode(str) {
      var s = "";
      if (str.length == 0) return "";
      s = str.replace(/&/g, "&amp");
      s = s.replace(/</g, "&lt");
      s = s.replace(/>/g, "&gt");
      s = s.replace(/ /g, "&nbsp");
      s = s.replace(/\'/g, "&#39");
      s = s.replace(/\"/g, "&quot");
      return s;
    },
    htmlDecodeByRegExp(str) {
      var s = "";
      if (str.length == 0) return "";
      s = str.replace(/&amp;/g, "&");
      s = s.replace(/&lt/g, "<");
      s = s.replace(/&gt/g, ">");
      s = s.replace(/&nbsp/g, " ");
      s = s.replace(/&#39/g, "'");
      s = s.replace(/&quot/g, '"');
      return s;
    },
    blogid() {
      blogall().then((res) => {
        this.data.blog_id = "blog" + this.zeng(res.length);
        this.wang.blog_id = "blog" + this.zeng(res.length);
      });
    },
    addsort() {
      for (var i = 0; i <= this.optionsf.length; i++) {
        if (this.optionsf[i].sort_name == this.selectf) {
          this.cong.sort_id = this.optionsf[i].sort_id;
          this.cong.blog_id = this.wang.blog_id;
   
          adds(this.cong).then((res) => {});
        }
      }
    },
    tijiao() {
      this.data.blog_content = this.htmlEncode(this.data.blog_content);
      this.wang.blog_content = this.data.blog_content;

      this.wang.blog_title = this.data.blog_title;
      this.wang.blog_date = this.data.blog_date;
      this.wang.blog_id = this.data.blog_id;
      this.wang.user_id = this.data.user_id;
      this.wang.blog_views = this.data.blog_views;
      this.wang.blog_comment_count = this.data.blog_comment_count;
      if (this.blog_id != 1) {
        console.log(this.wang);
        add(this.wang).then((res) => {
        this.blogid()
        this.addsort(       )
         
        });
 
      } else {
        update(this.wang)
          .then((res) => {
            for (var i = 0; i <= this.optionsf.length; i++) {
              if (this.optionsf[i].sort_name == this.selectf) {
                this.cong.sort_id = this.optionsf[i].sort_id;
                this.cong.blog_id = this.wang.blog_id;
                updates(this.cong).then((res) => {
                  console.log(res);
                });
              }
            }
          })
          .catch((err) => {});
      }
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.top {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
}
.el-button--primary {
  color: #fff;
  width: 95%;
  background-color: #fc813b;
  border-color: #fc813b;
}
.lef {
  padding-left: 100px;
  padding-top: 10px;
}
</style>

 
 

 